<template>
	<view class="cart-container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="header-title">购物车</text>
		</view>

		<!-- 商品列表 -->
		<scroll-view scroll-y="true" class="product-list">
			<view v-for="(item, index) in cartItems" :key="index" class="product-item">
				<checkbox class="product-checkbox" :checked="item.selected" @change="toggleSelection(index)" />
				<image class="product-image" :src="item.goodsUrl" mode="aspectFill" />
				<view class="product-info">
					<text class="product-name">{{ item.goodsName }}</text>
					<text class="product-price">￥{{ (item.goodsPrice * item.goodsNum).toFixed(2) }}</text>
				</view>
				<view class="quantity-control">
					<view class="quantity-box">
						<button class="quantity-btn minus" @click="updateQuantity(index, -1)">-</button>
						<text class="quantity">{{ item.goodsNum }}</text>
						<button class="quantity-btn plus" @click="updateQuantity(index, 1)">+</button>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="footer">
			<!-- 全选 -->
			<view class="select-all">
				<checkbox class="select-all-checkbox" :checked="selectAll" @change="toggleSelectAll" />
				<text>全选</text>
			</view>
			<!-- 总价 -->
			<text class="total-price">总价: ￥{{ totalPrice.toFixed(2) }}</text>
			<!-- 结算按钮 -->
			<button class="checkout-button" @click="checkout">结算</button>
		</view>
	</view>
</template>

<script>
	import {
		findCar
	} from "@/api/shopping.js";

	export default {
		data() {
			return {
				cartItems: [], // 购物车商品列表
				selectAll: false, // 全选状态
			};
		},
		computed: {
			totalPrice() {
				return this.cartItems.reduce((total, item) => {
					if (item.selected) {
						// 转换为数字进行计算
						return total + (parseFloat(item.goodsPrice) * parseInt(item.goodsNum, 10));
					}
					 return total;
				}, 0);
				  return total.toFixed(3); 
			},
		},

		methods: {
			// 获取购物车商品列表
			getlistCar() {
				let userId = this.$cookies.get("id");
				findCar({
						userId: String(userId)
					})
					.then(res => {
						this.cartItems = res.data.map(item => ({
							...item,
							goodsPrice: parseFloat(item.goodsPrice) || 0, // 转换为数字
							goodsNum: parseInt(item.goodsNum, 10) || 1, // 转换为整数
							selected: true, // 初始未选中
						}));

					})
					.catch(error => {
						console.error("查询购物车失败:", error);
					});
			},

			// 切换商品选中状态
			toggleSelection(index) {
				this.cartItems[index].selected = !this.cartItems[index].selected;
				// 更新全选状态
				this.selectAll = this.cartItems.every(item => item.selected);
			},

			// 更新商品数量
			updateQuantity(index, delta) {
				const item = this.cartItems[index];
				const newQuantity = item.goodsNum + delta;
				if (newQuantity > 0) {
					item.goodsNum = newQuantity;
				}
			},

			// 结算操作
			checkout() {
				const selectedItems = this.cartItems.filter(item => item.selected);

				if (selectedItems.length === 0) {
					uni.showToast({
						title: "请先选择商品",
						icon: "none",
					});
					return;
				}

				console.log("结算商品:", selectedItems); // 打印结算的商品

				// 将选中的商品数据存储到本地存储
				uni.setStorage({
					key: 'selectedItems',
					data: selectedItems,
					success: () => {
						// 存储成功后跳转到订单中心页面
						uni.navigateTo({
							url: '/pages/profile/orderCenter'
						});
					},
					fail: (err) => {
						console.error("存储失败:", err);
					}
				});
			},


			// 切换全选状态
			toggleSelectAll() {
				this.selectAll = !this.selectAll;
				this.cartItems.forEach(item => {
					item.selected = this.selectAll;
				});
				this.updateTotalPrice(); // 更新总价
			},

		},
		mounted() {
			this.getlistCar();
		},
	};
</script>

<style>
	.cart-container {
		padding-bottom: 60px;
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.header {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #2ac2d2;
	}

	.header-title {
		font-size: 18px;
		font-weight: bold;
	}

	.product-list {
		flex: 1;
		overflow-y: scroll;
	}

	.product-item {
		display: flex;
		align-items: center;
		padding: 12px;
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
	}

	.product-checkbox {
		margin-right: 10px;
	}

	.product-image {
		width: 80px;
		height: 80px;
		margin-right: 10px;
		border-radius: 8px;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.product-price {
		color: #e60012;
		font-size: 14px;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.quantity-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #ccc;
		border-radius: 16px;
		overflow: hidden;
		width: 120px;
		height: 20px;
		background-color: #ffffff;
	}

	.quantity-btn {
		flex: 1;
		text-align: center;
		background-color: #f9f9f9;
		border: none;
		font-size: 16px;
		color: #333;
		cursor: pointer;
		line-height: 36px;
	}

	.quantity-btn.minus {
		border-right: 1px solid #ccc;
	}

	.quantity-btn.plus {
		border-left: 1px solid #ccc;
	}

	.quantity {
		width: 40px;
		text-align: center;
		font-size: 16px;
		color: #333;
		line-height: 36px;
		background-color: #ffffff;
	}

	.footer {
		position: fixed;
		bottom: 50px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		background-color: #ffffff;
		border-top: 1px solid #f0f0f0;
		height: 60px;
	}

	.select-all {
		display: flex;
		align-items: center;
	}

	.select-all-checkbox {
		margin-right: 5px;
	}

	.total-price {
		padding-left: 40px;
		font-size: 16px;
		color: #333;
	}

	.checkout-button {
		width: 100px;
		height: 40px;
		background-color: #e60012;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
		border-radius: 20px;
	}

	.checkout-button:disabled {
		background-color: #ccc;
	}

	.empty-cart {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #888;
		font-size: 16px;
	}
</style>